<template>
  <div class="liquid-wrapper">
    <ul class="flex wrap">
      <li
        v-for="(item, index) in dataList"
        :key="index"
        :style="{
          'padding-left': space / 2 + 'px',
          'padding-right': space / 2 + 'px',
        }"
      >
        <div
          ref="liquid"
          class="liquid"
          :style="{ width: width, height: height }"
        ></div>
        <div class="liquid-value">
          <p>{{ item.value }}</p>
          {{ item.unit }}
        </div>
        <div class="liquid-title">
          {{ item.title }}
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
/**
 * Liquid-水球组件  2021/11/26
 * @author gyp
 * @param {Array} dataList 数据
 */
import Liquid from '@/charts/liquid.js';
export default {
  name: 'Liquid',
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    width: {
      type: String,
      default: '110px',
    },
    height: {
      type: String,
      default: '110px',
    },
    // 间隔
    space: {
      type: [Number, String],
      default: 44,
    },
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.dataList.forEach((item, index) => {
        const chart = new Liquid(this.$refs.liquid[index]);
        chart.setData();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.liquid-wrapper {
  ul {
    padding: 0;
    margin: 0;
    li {
      position: relative;
      margin-top: 15px;
      list-style: none;
      text-align: center;
      color: #00ffff;
      padding: 0 22px;
      .liquid {
        width: 111px;
        height: 111px;
      }
      .liquid-value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -75%);
        color: #fff;
        p {
          margin-bottom: 0px;
          font-size: 26px;
          color: #fffc00;
        }
      }
      .liquid-title {
        margin-top: 5px;
      }
    }
  }
}
</style>
